import React, { FC,useState} from 'react';
import { Text, View,Button,Image, navigateTo } from '@ray-js/ray';
import styles from './index.module.less';
import informationpopup from '../../assets/images/tab/InformationPopup.png';
import red_heart from '../../assets/images/tab/red_heart.png'



export default function InformationPopup(props){

  
  const close=()=>{
    props.onClose();
  }

  const OpenSendPopup=()=>{
    props.onOpenSendPopup();
  }

    return (
        <>
          <View className={styles.bg}>
            <Image src={informationpopup} className={styles.popup_img}></Image>
            <View className={styles.erase1}></View>
            <View className={styles.erase2}></View>
            <View className={styles.erase3}></View>

            <View className={styles.box}>
              <Text className={styles.name}>{props.userName}的{props.Name}</Text>
              <Text className={styles.distant_font}>距离{props.distance}米,正在接近中</Text>
              <Text className={styles.information}>{props.information}</Text>
              <Button className={styles.ack_btn} onClick={OpenSendPopup}>回复</Button>
              <Button className={styles.close_btn} onClick={close}>X</Button>
            </View>

            <Text className={styles.Hi}>Hi</Text>
          </View>
        </>
      );
}

